<template>
  <el-container class="bg-light" style="min-height: 100vh">
    <el-header class="bg-info" style="height: 4rem">
      <el-row>
        <el-col :span="4" class="text-center">
          <img src="@/assets/11.png" style="height: 4rem" />
        </el-col>
        <el-col :span="20">
          <el-menu mode="horizontal" class="h-100 bg-info" :router="true">
            <el-menu-item index="/" class="ms-auto">回到首页</el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
    </el-header>
    <el-main class="bg-white w-75 mx-auto shadow-lg">
      <!--笔记标题-->
      <div>
        <span class="fs-1"></span>
      </div>
      <!--笔记内容-->
      <div>
        <div id="editor-container"></div>
      </div>
      <!--标签区域-->
      <div class="ms-3"></div>
      <!--作者信息-->
      <div class="ms-3 py-3">
          <el-row>
              <el-col>标签</el-col>
          </el-row>
        <el-row>
          <el-col :span="2">
            <el-avatar shape="square" />
          </el-col>
          <el-col :span="8">
            <div>TA的收藏</div>
            <div>TA的点赞</div>
          </el-col>
        </el-row>
      </div>
      <!--功能区-->
      <div class="px-3 py-3">
        <el-row>
          <el-col :span="10">
            <el-button type="danger">点赞</el-button>
          </el-col>
          <el-col :span="14" class="text-end">
            点赞({{ note.likeNum }}) 阅读({{ note.viewNum }}) 评论({{
              note.commentNum
            }})
          </el-col>
        </el-row>
      </div>
      <!--评论区-->
      <!--评论区-->
      <div class="px-3 py-3">
        <LoogGing :noteInfoId="noteId" />
      </div>
    </el-main>
  </el-container>
</template>

<script>
import auth from "@/tools/auth/"
import LoogGing from "./LoogGing.vue";
export default {
  name: "LoogHome",
  components: {
    LoogGing,
  },
  data() {
    return {
      //存放Wangeditor的实列
      editor: null,
      //从首页读取noteId
      noteId: this.$route.params.noteId,
      //后端笔记详情接口返回的详情数据模式
      note: {
        authorId: null,
        authorName: null,
        noteName: null,
        noteContent: [],
        publishTime: null,
        headUrl: null,
        likeNum: 0,
        commentNum: 0,
        viewNum: 0,
        tags: [
          {
            tagId: null,
            tagName: null,
          },
        ],
      },
    };
  },
   mounted() {
    this.headUrl = auth.getLoginUser().headUrl;
  },
};
</script>

<style>
</style>